<template>
  <el-row :gutter="10">
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24">
      <el-menu active-text-color="#409eff" class="el-menu-vertical-demo" :default-active="defaultActive"
        text-color="#001529" ref="menuRef" @select="selectMenu" style="border-radius: 8px;">
        <el-menu-item index="0" v-hasPermi="['meta:create']">
          <el-button style="margin: 0 auto" type="primary" @click="createMeta">新增</el-button>
        </el-menu-item>
        <div v-for="item in list" :key="item" style="position:relative;">
          <el-tooltip effect="dark" :content="item.metaName + '('+item.id+')' " placement="top">
            <el-menu-item :index="item.id">
              <!-- <el-text truncated> -->
              <span class="menu">
                <span @click="handleField">{{ item.metaName + '('+item.id+')' }}</span>
              </span>
              <!-- </el-text> -->
            </el-menu-item>
          </el-tooltip>
          <el-icon @click="update(item.id)" style="position: absolute;right: 10px;top:20px">
            <Edit />
          </el-icon>
        </div>
      </el-menu>
    </el-col>
    <el-col :span="20" :xs="24">
      <ContentWrap>
        <!-- 搜索栏 -->
        <el-form ref="queryFormRef" :inline="true" :model="fieldParams" class="-mb-15px" label-width="90px">
          <el-form-item label="字段名称" prop="fieldDesc">
            <el-input v-model="fieldParams.fieldDesc" class="!w-240px" clearable placeholder="请输入字段名称"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="字段分类" v-if="activeName.indexOf('图书') > -1" prop="classify">
            <el-select v-model="fieldParams.classify" placeholder="请选择图书字段分类">
              <el-option v-for="item in bookFieldClassify" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker v-model="fieldParams.createTime"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" end-placeholder="结束日期"
              start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon class="mr-5px" icon="ep:refresh" />
              重置
            </el-button>
            <el-button plain type="primary" @click="createFiled()">
              <Icon class="mr-5px" icon="ep:plus" />
              新增字段
            </el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>

      <!-- 列表 -->
      <ContentWrap>
        <el-table v-loading="loading" :data="fieldList">
          <el-table-column align="center" label="编号" prop="id" />
          <el-table-column align="center" label="字段标识" prop="name" />
          <el-table-column align="center" label="字段名称" prop="fieldDesc" />
          <el-table-column :formatter="booleanFormatter" align="center" label="是否必填" prop="required" width="180" />
          <el-table-column :formatter="dateFormatter" align="center" label="创建时间" prop="createTime" width="180" />
          <el-table-column :width="300" align="center" label="操作">
            <template #default="scope">
              <el-button link type="primary" @click="updateField(scope.row.id)">编辑</el-button>
              <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </ContentWrap>
    </el-col>
  </el-row>

  <MateForm ref="formRef" />
  <FieldForm ref="fieldFormRef" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import * as metaApi from '@/api/meta'
import { Edit } from '@element-plus/icons-vue'
import MateForm from '@/views/meta/MetaForm.vue'
import FieldForm from '@/views/meta/FieldForm.vue'
import { dateFormatter } from '@/utils/formatTime'

const activeName = ref('')
const activeId = ref(0)
const loading = ref(false)
const menuRef = ref<any>()
const formRef = ref<any>()
const fieldFormRef = ref<any>()
const defaultActive = ref('')
const list = ref([])
const fieldList = ref([])
const bookFieldClassify = ref([])
const queryFormRef = ref()

const queryParams = reactive({
  pageNo: 1,
  pageSize: 50
})

const fieldParams = reactive({
  pageNo: 1,
  pageSize: 50,
  fieldDesc: '',
  classify: '',
  createTime: []
})
const createMeta = () => {
  formRef.value.openDialog()
}

const booleanFormatter = (row, column, cellValue) => {
  if (cellValue) {
    return '是'
  } else {
    return '否'
  }
}

const update = (id) => {
  formRef.value.updateDialog(id)
}

const createFiled = () => {
  fieldFormRef.value.openDialog(activeName.value, activeId.value)
}

const handleField = () => {
  console.log('查看字段列表')
}
const handleDelete = async (id) => {
  await metaApi.deleteField(id)
  await selectField(fieldParams, activeId.value)
}

const getList = async () => {
  let res = await metaApi.list(queryParams)
  list.value = res.list
  defaultActive.value = list.value[0].id
  selectField(fieldParams, list.value[0].id)
}
const selectMenu = (index) => {
  selectField(fieldParams, index)
}
const selectField = async (fieldParams, id) => {
  if (id == 0) {
    return
  }
  activeId.value = id
  list.value.forEach((item) => {
    if (item.id == id) {
      activeName.value = item.metaName
    }
  })
  fieldList.value = await metaApi.selectField(fieldParams, id)
}

const updateField = (id) => {
  fieldFormRef.value.updateDialog(id, activeName.value)
}

const getClassify = async () => {
  const data = await metaApi.getBookFieldClassify()
  bookFieldClassify.value = data
}

const handleQuery = () => {
  selectField(fieldParams, activeId.value)
}

const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

provide('getList', getList)
provide('selectField', selectField)

/** 初始化 **/
onMounted(() => {
  menuRef.value.activeIndex = 1
  getList()
  getClassify()
})
</script>
<style lang="scss" scoped>
.body {
  margin: 0;
}
.el-row{
  margin-bottom: 0px;
}
.el-col{
  padding-right: 0px !important;
  height: 100vh;
  overflow: auto;
}
.el-menu-item .menu {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
</style>
